<template>
  <div class="component-root-container flex">
    <el-header>
      <el-form ref="notInTimeRule" :rules="notInTimeRule" :model="notInTime" label-width="120px" label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="站址编码:" prop="stationCode">
              <el-input v-model="notInTime['stationCode']" placeholder="请输入" @input="change($event)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="CRM订单状态:" prop="crmOrderStateInfo">
              <el-select v-model="notInTime['crmOrderStateInfo']" @change="selectChange" class="multiple-select"
                placeholder="请选择" multiple clearable>
                <el-option v-for="item in options" :key="item.key" :value="item.key" :label="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                  查询
                </el-button>
                <el-button class="query" @click="reset">
                  重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div><span>调用次数/日：</span><span>{{ queryCount }}</span></div>
            <div><a class="link" href="javascript:;" @click="$router.push({name:'biz-ml'})">详情</a></div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">物业管理系统在电费出账时通过调用内存数据库的封装服务，实时查询各站址下本计费周期的未起租订单信息日期，避免业务人员订单未起租就进行报账，规避收支匹配方面的风险。</div>
          </div>
          <div class="page-tip">
            <div class="params-tip"><span>示例参数</span>：站址编码：371302908001900293，CRM订单状态：全选</div>
          </div>
        </el-row>
      </div>
    </el-main>

    <el-main>
      <el-table v-loading="listLoading" ref="table" border class="table-bottom" :data="tableData" element-loading-text="数据加载中...">
        <el-table-column align="center" type="index" label="序号" :index="indexMethod" width="80" />
        <el-table-column prop="stationCode" align="center" label="站址编码" show-overflow-tooltip />
        <el-table-column prop="customer" align="center" label="客户" width="120" show-overflow-tooltip />
        <el-table-column prop="crmOrderCode" align="center" label="CRM订单号" show-overflow-tooltip />
        <el-table-column prop="crmOrderState" align="center" label="CRM订单状态" show-overflow-tooltip />
        <el-table-column prop="startDate" align="center" label="订单开始日期" show-overflow-tooltip />
        <el-table-column prop="endDate" align="center" label="订单截止日期" show-overflow-tooltip />
      </el-table>
      <el-row>
        <el-col :span="24">
          <el-pagination :page-sizes="[5, 10, 25, 50]" :current-page="paginationData['currentPage']" :page-size="paginationData['pageSize']"
            :total="paginationData['total']" layout="total, sizes, prev, pager, next, jumper" @current-change="currentChange"
            @size-change="handleSizeChange" />
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        listLoading: false,
        queryCount:0,
        notInTime: {
          stationCode: '',
          crmOrderStateInfo: ''
        },
        options: [{
            value: '全选',
            key: '00'
          },
          {
            value: '已起租',
            key: '51'
          },
          {
            value: '协议已生成',
            key: '43'
          },
          {
            value: '服务开通竣工',
            key: '52'
          },
          {
            value: '订单编制完成',
            key: '10'
          },
          {
            value: '价格计算完成',
            key: '12'
          },
          {
            value: '交付验收未通过',
            key: '32'
          },
          {
            value: '协议签订中',
            key: '41'
          },
          {
            value: '未转开通单',
            key: '50'
          },
          {
            value: '项目建设中',
            key: '20'
          },
          {
            value: '未交付验收',
            key: '30'
          },
          {
            value: '未价格计算',
            key: '40'
          },
          {
            value: '服务开通失败',
            key: '53'
          },
          {
            value: '价格计算失败',
            key: '13'
          },
          {
            value: '交付验收中',
            key: '31'
          },
          {
            value: '协议签订失败',
            key: '60'
          },
          {
            value: '价格计算失败',
            key: '15'
          },
          {
            value: '价格计算成功',
            key: '14'
          },
          {
            value: '订单需求变更中',
            key: 'B0'
          },
          {
            value: '起租失败',
            key: '54'
          }
        ],
        tableData: [],
        lastSelect: [],
        paginationData: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        },
        notInTimeRule: {
          stationCode: [{
            required: true,
            message: '请输入站址编码',
            trigger: 'blur'
          }],
          crmOrderStateInfo: [{
            required: true,
            message: '请选择CRM订单状态',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
       this.queryPageCount('2.5')
    },
    mounted() {},
    methods: {
      getPageData() {
        if (this.paginationData.currentPage * this.paginationData.pageSize <= this.paginationData.total) {
          this.tableData = (this.allData || []).slice((this.paginationData.currentPage - 1) * this.paginationData.pageSize,
            this.paginationData.currentPage * this.paginationData.pageSize)
        } else {
          this.tableData = (this.allData || []).slice((this.paginationData.currentPage - 1) * this.paginationData.pageSize,
            this.paginationData.total)
        }
        // 添加索引

      },
      async getList() {
        await this.$refs['notInTimeRule'].validate()
        const crmOrderStateInfoOrigin = this.notInTime.crmOrderStateInfo.filter(c => c !== '00')
        const crmOrderStateInfo = []
        crmOrderStateInfoOrigin.forEach(c => crmOrderStateInfo.push({
          crmOrderState: c
        }))
        const data = {
          stationCodeInfo: [{
            stationCode: this.notInTime.stationCode
          }],
          crmOrderStateInfo: crmOrderStateInfo
          // stationCodeInfo: [
          //   {'stationCode': '520526500000000029'},
          //   {'stationCode': '330226908000000758'},
          //   {'stationCode': '330226908000000635'}
          // ],
          // crmOrderStateInfo: [
          //   {'crmOrderState': '97'},
          //   {'crmOrderState': '99'}
          // ]
        }
        // order/curingBinding
        const r = await this.$http({
          url: this.$http.adornBizUrl('/noInitialOrder/findOrderByStationCode'),
          method: 'post',
          data: this.$http.adornData('param=' + JSON.stringify(data), false),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        })
        // r.data.data && (this.tableData = r.data.data)
        this.allData = r.data.data
        this.paginationData['total'] = r.data.data.length
        this.getPageData()
      },
      // 分页跳转
      currentChange(targetPage) {
        console.log('currentchange>targetPage', targetPage)
        this.paginationData['currentPage'] = targetPage
        // table数据接口
        this.getList()
      },
      // 分页跳转
      handleSizeChange(size) {
        console.log('handlesizechange>size', size)
        this.paginationData['pageSize'] = size
        this.paginationData['currentPage'] = 1
        // table数据接口
        this.getList()
      },
      selectChange(value) {
        if (value.includes('00') && !this.lastSelect.includes('00')) {
          this.notInTime['crmOrderStateInfo'] = this.options.map(o => o.key)
        } else if (!value.includes('00') && this.lastSelect.includes('00')) {
          this.notInTime['crmOrderStateInfo'] = []
        } else {
          if (value.length !== this.options.length) {
            const index = value.indexOf('00')
            if (index > -1) {
              value.splice(index, 1)
            }
            this.notInTime['crmOrderStateInfo'] = value
          } else {
            this.notInTime['crmOrderStateInfo'] = value
          }
        }
        this.lastSelect = value
      },
      async buttonClick() {
        this.listLoading = true
        try {
          this.tableData = []
          // await this.$refs['notInTimeRule'].validate()
          this.getList()
        } catch (e) {
          console.log(e)
        } finally {
          this.listLoading = false
        }
      },
      indexMethod(index) {
        // return `${index + 1}`
        return (this.paginationData.currentPage - 1) * this.paginationData.pageSize + index + 1
      },
      reset() {
        this.notInTime = {
          stationCode: '',
          crmOrderStateInfo: ''
        }
        this.tableData = []
        this.paginationData['total'] = 0
        this.paginationData['currentPage'] = 1
        this.paginationData['pageSize'] = 10
        this.$refs['notInTimeRule'].clearValidate()
      },
      change(e) {
        this.$forceUpdate()
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if(r.data.data && r.data.data.length >0){
              var result = r.data.data[0];
              this.queryCount=result.cnt||'0';
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../assets/scss/_formatQueryPage";
  @include formatQueryPage(0, 60%, left);
  .el-input {
    width: 60%;
  }

  .el-select {
    width: 60%;
  }

  .query {
    color: rgba(255, 255, 255, 1);
    background: rgba(235, 75, 75, 1);
    border-radius: 6px;
    border-color: #eb4b4b;
  }

  body .el-table th.gutter {
    display: table-cell !important;
  }

  body .el-table colgroup.gutter {
    display: table-cell !important;
  }
</style>
